import React, { useEffect, useRef, useState } from 'react';
// import { Card, Alert, Typography } from 'antd';
// import { useIntl, FormattedMessage } from 'umi';
import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
import styles from './list.less';
import { List, Avatar, Space } from 'antd';
// import { RightCircleFilled, LeftCircleFilled } from '@ant-design/icons';
// import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
// import { Space } from 'antd';
import img1 from '@/assets/img1.png';
import img2 from '@/assets/img2.png';
import img3 from '@/assets/img3.png';
import img4 from '@/assets/img4.png';
import kejidongtai from '@/assets/kejidongtai.png';
const data = Array.from({ length: 23 }).map((_, i) => ({
  href: 'https://ant.design',
  title: `ant design part ${i}`,
  avatar: 'https://joeschmoe.io/api/v1/random',
  description:
    'Ant Design, a design language for background applications, is refined by Ant UED Team.',
  content:
    'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
}));

const IconText = ({ icon, text }: { icon: React.FC; text: string }) => (
  <Space>
    {React.createElement(icon)}
    {text}
  </Space>
);
const Portal: any = () => {
  return (
    <div className={styles.list}>
      <List
        itemLayout="vertical"
        size="large"
        pagination={{
          onChange: (page) => {
            console.log(page);
          },
          pageSize: 11,
        }}
        dataSource={data}
        // footer={
        //   <div>
        //     <b>ant design</b> footer part
        //   </div>
        // }
        renderItem={(item) => (
          <List.Item
            key={item.title}
            onClick={() => {
              console.log(1111);
            }}
            style={{ cursor: 'pointer' }}
            // actions={[
            //   <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
            //   <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
            //   <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
            // ]}
            extra={
              <img
                width={150}
                alt="logo"
                src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
              />
            }
          >
            <List.Item.Meta
              //   avatar={<Avatar src={item.avatar} />}
              title={<a href={item.href}>{item.title}</a>}
              //   description={item.description}
            />
            {item.content}
          </List.Item>
        )}
      />
    </div>
  );
};

export default Portal;
